<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="app-container">
      <div class="filter-wrap" style="padding-bottom: 10px;">
        <el-radio v-model="radio" label="1" @change="toggleTime('1')"
          >固定时间</el-radio
        >
        <el-radio-group
          v-model="listDate.tag"
          :disabled="radio === '1' ? false : true"
          size="mini"
        >
          <el-radio-button label="0">今天</el-radio-button>
          <el-radio-button label="1">昨天</el-radio-button>
          <el-radio-button label="2">最近7天</el-radio-button>
          <el-radio-button label="3">最近30天</el-radio-button>
        </el-radio-group>
        <el-button
          type="primary"
          style="margin:5px 0 5px 30px"
          size="mini"
          @click="handleFilter"
          >确定</el-button
        >
      </div>

      <div class="filter-wrap">
        <el-radio v-model="radio" label="2" @change="toggleTime('2')"
          >自定义时间</el-radio
        >
        <el-date-picker
          size="mini"
          :picker-options="pickerBeginDateBefore"
          :disabled="radio === '2' ? false : true"
          v-model="listDate.dateStrs"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>

      <el-container>
        <el-main
          style="height: 100%;text-align:left;overflow:auto;padding-left: 0"
          class="anly-main"
        >
          <border-warp widthAuto>
            <div class="anly-main-wrap">
              <div class="wrap-with-halfboder"></div>
              <el-row>
                <div class="list anly-main-chart">
                  <p>隐患变化趋势</p>
                  <div class="table_two" id="table_two" ref="tabletwof"></div>
                </div>
              </el-row>
              <div class="filter-result-wraplist">
                <div class="filter-result-left">
                  <div class="list">
                    <p>报警TOP10</p>
                    <div class="table_three">
                      <border-warp widthAuto>
                        <el-table :data="list" style="width: 100%">
                          <el-table-column label="排名">
                            <template slot-scope="scope">
                              <span style="color: #2bdef5"
                                >NO.{{ scope.row.id }}</span
                              >
                            </template>
                          </el-table-column>
                          <el-table-column label="建筑名">
                            <template slot-scope="scope">
                              <span>{{ scope.row.name }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="time" label="次数">
                            <template slot-scope="scope">
                              <span>{{ scope.row.count }}</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </border-warp>
                    </div>
                  </div>
                </div>
                <div class="filter-result-right">
                  <div class="list">
                    <p>故障TOP10</p>
                    <div class="table_three">
                      <border-warp widthAuto>
                        <el-table :data="slist" style="width: 100%">
                          <el-table-column label="排名">
                            <template slot-scope="scope">
                              <span style="color: #2bdef5"
                                >NO.{{ scope.row.id }}</span
                              >
                            </template>
                          </el-table-column>
                          <el-table-column label="建筑名">
                            <template slot-scope="scope">
                              <span>{{ scope.row.name }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="time" label="次数">
                            <template slot-scope="scope">
                              <span>{{ scope.row.count }}</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </border-warp>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </border-warp>
        </el-main>
        <div class="aside-withline" style="width: 350px;">
          <title-warp :title="'隐患处理情况'" width-auto>
            <div class="list">
              <div
                class="handle-defect"
                id="handle_defect"
                ref="tabledefectf"
                style="height: 220px"
              ></div>
            </div>
          </title-warp>
          <div style="height: 15px;"></div>
          <border-warp width-auto>
            <div class="list">
              <p style="margin-left: -10px;">隐患类型分布</p>
              <div
                class="table_one"
                id="table_one"
                ref="tableonef"
                style="height: 220px;width:100%;"
              ></div>
            </div>
          </border-warp>
        </div>
      </el-container>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import {
  getDefect,
  CountByType,
  CountByMonth,
  selectCountByBuild
} from "@/api/device/deviceFireMain/index";
export default {
  data() {
    return {
      value: "",
      radio: "1",
      list: [],
      slist: [],
      typeList: [],
      type: "",
      time: "",
      pickerBeginDateBefore: {
        disabledDate: time => {
          // let _now = Date.now();
          // let _nowbefore30day = new Date(_now - 1000 * 60 * 60 * 24 * 30);
          // return time.getTime() > _now||time.getTime()<_nowbefore30day.getTime();
          return time.getTime() > Date.now() - 8.64e6;
        }
      },
      listDate: {
        dateStrs: null,
        tag: "0",
        channelId: null
      },
      params: {
        channelId: ""
      },
      isnonetype: false,
      isnonetime: false
    };
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    $route: "fetchData"
  },
  methods: {
    fetchData() {
      let vm = this;
      vm.params.channelId = vm.$route.params.id;
      vm.toggleTime("1");
      vm.buildCount();
      vm.initChart1();
      vm.initChart2();
      vm.handleDefectChart();
    },
    handleDefectChart() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      getDefect(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        this.isnonetime = res.data.length === 0;
        let ayarr = [
          { value: res.data.callCount, name: "未处理" },
          { value: res.data.handleCount, name: "已处理" }
        ];
        let stringarr = ["未处理", "已处理"];
        var handleChart = echarts.init(this.$refs.handledefectf);
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{b} ({d}%)"
          },
          legend: {
            orient: "vertical",
            icon: "circle",
            right: "10",
            top: "center",
            textStyle: {
              color: "rgba(80, 227, 194, 0.7)"
            },
            data: stringarr,
            color: ["#2bdef5", "#EB7E10"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["32%", "70%"],
              center: ["42%", "50%"],
              data: ayarr,
              color: ["#2bdef5", "#EB7E10"],
              label: {
                show: true,
                formatter: "{c}个"
              }
            },
            {
              type: "pie",
              radius: ["32%", "70%"],
              center: ["42%", "50%"],
              data: ayarr,
              color: ["#2bdef5", "#EB7E10"],
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "inner",
                    formatter: "{d}%",
                    textStyle: {
                      color: "#ffffff"
                    }
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        handleChart.setOption(option);
      });
    },
    //火灾报警类型分布
    initChart1() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      CountByType(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        if (!res.data || res.data.length === 0) {
          this.typeList = [];
          this.isnonetype = true;
        } else {
          this.isnonetype = false;
          this.typeList = res.data;
        }
        const type_arr = [];
        const dataStruct = [];
        for (let obj of this.typeList) {
          let alrmType = obj.alrmType;
          dataStruct.push({ value: obj.count, name: alrmType }); //重新组成对象
          type_arr.push(alrmType); //把所有的类型放在数组里
        }
        var chart1 = echarts.init(this.$refs.tableonef);
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "3%",
            containLabel: true
          },
          xAxis: {
            color: "#fff",
            splitLine: {
              //去掉网格线
              show: true,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)",
                type: "dashed"
              }
            },
            type: "value",
            boundaryGap: [0, 0.01],
            axisLabel: {
              //坐标轴刻度标签的相关设置
              show: true,
              textStyle: {
                color: "rgba(80, 227, 194, 0.3)",
                align: "right",
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            },
            axisTick: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            }
          },
          yAxis: {
            type: "category", //轴的类型分两种 1.category（类别）2.value(值)
            data: type_arr,
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(80, 227, 194, 0.7)",
                align: "right",
                fontSize: 12 /*文字大小*/
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)" //轴的颜色
              }
            },
            axisTick: {
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)" //轴上点的颜色
              }
            }
          },
          series: [
            {
              name: "",
              type: "bar",
              data: dataStruct,
              label: {
                normal: {
                  show: true, //显示数字
                  position: "right",
                  textStyle: {
                    fontSize: "14", //柱状上的显示的文字
                    color: "#2bdef5"
                  }
                }
              },
              barWidth: 30, //柱子宽度
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "rgba(80, 227, 194, 0)" },
                    { offset: 1, color: "#3DA996" }
                  ])
                }
              }
            }
          ]
        };
        chart1.setOption(option);
      });
    },
    //火灾报警时间分布
    initChart2() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      CountByMonth(
        Object.assign({}, this.listDate, this.params, { dateStrs: dateStrs })
      ).then(res => {
        this.isnonetime = res.data.length === 0;
        let date_arr = res.data.dateList;
        let callList = res.data.callList;
        let faultList = res.data.faultList;

        var chart2 = echarts.init(this.$refs.tabletwof);

        var option = {
          grid: {
            left: 60,
            right: 40,
            bottom: 20,
            top: 50
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          legend: {
            icon: "roundRect",
            orient: "vertical",
            textStyle: {
              color: "rgba(80, 227, 194, 0.7)"
            },
            itemHeight: 3,
            left: "right",
            top: "top",
            data: ["报警", "故障"]
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: date_arr,
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            }
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(80, 227, 194, 0.3)"
              }
            }
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100
            }
          ],
          series: [
            {
              type: "line",
              name: "报警",
              smooth: true,
              symbol: "none",
              showAllSymbol: true,
              sampling: "average",
              itemStyle: {
                normal: {
                  color: "#E4393C"
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#E4393C"
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0)"
                    }
                  ])
                }
              },
              data: callList
            },
            {
              type: "line",
              smooth: true,
              symbol: "none",
              name: "故障",
              showAllSymbol: true,
              sampling: "average",
              itemStyle: {
                normal: {
                  color: "#F5A623"
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#F5A623"
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0)"
                    }
                  ])
                }
              },
              data: faultList
            }
          ]
        };
        chart2.setOption(option);
      });
    },
    //火灾报警建筑排名
    buildCount() {
      let dateStrs;
      if (this.listDate.dateStrs) {
        dateStrs = this.listDate.dateStrs.toString();
      }
      selectCountByBuild(
        Object.assign(
          {},
          this.listDate,
          this.params,
          { dateStrs: dateStrs },
          { alrmCategory: 1 }
        )
      ).then(res => {
        this.list = res.data;
      });
      selectCountByBuild(
        Object.assign(
          {},
          this.listDate,
          this.params,
          { dateStrs: dateStrs },
          { alrmCategory: 0 }
        )
      ).then(res => {
        this.slist = res.data;
      });
    },
    handleFilter() {
      this.initChart1();
      this.initChart2();
      this.handleDefectChart();
      this.buildCount();
    },
    toggleTime(value) {
      if (value == "1") {
        this.listDate.dateStrs = undefined;
        this.listDate.tag = "3";
      } else {
        this.listDate.tag = undefined;
      }
      this.radio = value;
    }
  }
};
</script>
<style lang="scss">
p {
  color: #2bdef5;
}
.anly-app-container {
  padding-top: 0;
  padding-left: 27px;
  padding-right: 27px;

  .filter-wrap {
    display: flex;
    align-items: center;
    .filter-item {
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background: rgba(0, 0, 0, 0.3);
      }
      .el-radio-button__inner {
        // border-left: 1px solid rgba(80, 227, 194, 0.3) !important;
        border-radius: 0;
        font-weight: normal;
      }
      .el-radio-button:first-child .el-radio-button__inner {
        border-left: 0 !important;
      }
    }
  }
  .aside-withline {
    position: relative;
    width: 400px;
    height: 720px;

    color: #2bdef5;
    .list {
      padding-top: 12px;
      & > p {
        padding-left: 29px;
        margin: 0;
        i {
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .handle-defect {
    width: 100%;
    height: 290px;
  }
  .table_one {
    width: 100%;
  }
  .table_two,
  .table_three {
    width: 100%;
  }
  .table_two {
    height: 209px;
  }
  .anly-main {
    padding: 0 20px 0 0;

    .anly-main-wrap {
      min-height: 675px;
      background: none;
      // background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
      position: relative;
      .filter-result-wraplist {
        display: flex;
        padding: 40px 20px 20px 22px;
        & > div {
          flex: 1;
        }
        .filter-result-left {
          margin-right: 50px;
        }
      }
    }
    .anly-main-chart {
      margin: 0 20px;
    }
    .list {
      color: #2bdef5;
      & > p {
        i {
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .el-aside {
    height: 800px;
    padding: 22px 0;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 265px;
    margin-left: 10px;
  }
}
</style>
